<template>
  <div class="recentevent flex" @click="emits('send', item.id)">
    <span class="line" :style="{ 'background-color': item.color ?? '#3F8CFF', }"></span>
    <div class="icon_title flex">
      <span class="iconfont" :class="item.iconName"></span>
      <span class="title">{{ item.title }}</span>
    </div>
    <span class="iconfont icon-shuzhishangsheng icon" v-if="item.isRising"></span>
    <span class="iconfont icon-shuzhixiajiang icon" v-else></span>
    <div class="footer">
      <span class="date">{{ item.day }}|{{ item.time }}</span>
      <el-tag>
        <span class="iconfont icon-24gf-clockCircle" style="color:#636e72;margin-right:6px;"></span>
        <span>{{ item.duration }}</span>
      </el-tag>
    </div>
  </div>
</template>

<script setup lang="ts">
import { IEvent } from '@/types/user';
defineProps<{ item: IEvent }>()
const emits = defineEmits(["send"])
</script>


<style scoped lang="scss">
.recentevent {
  flex-direction: column;
  align-items: flex-start;
  margin: 20px;
  padding: 6px 16px;
  // border-left: 4px solid #2980b9;
  position: relative;
  text-align: left;
  gap: 10px;
  min-height: 80px;
  justify-content: space-between;

  .icon_title {
    width: 86%;
    gap: 10px;
    align-items: center;

    .iconfont {
      font-size: 26px;
      color: #ffa502;
    }
  }

  .icon {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #ffa502;
    font-size: 20px;
  }

  .title {
    width: 86%;
    // max-width: 180px;
    font-size: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
  }

  .line {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-radius: 10px;
    // background-color: #3F8CFF;
  }

  .footer {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;

    .date {
      color: #91929E;
      font-size: 14px;
    }
  }
}
</style>
